<template>
	<view>
		<view class="table-content">
			<view class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in form" :key="index">
					<view class="list-item">
						<view>工位ID</view>
						<view>{{item.stationId}}</view>	
					</view>
					<view class="list-item">
						<text>工序</text>
						<text>{{item.stationIdentifying}}</text>
					</view>
					<view class="list-item">
						<text>重点工序标识</text>
						<text>{{item.isImport == '0' ? '非重点' : '重点'}}</text>
					</view>
					<!-- <view class="list-item">
						<text>重点工序名称</text>
						<u-input v-model="item.proIsImportName" type="select" :select-open="showImportName" @click="showImport(index)"/>
					</view> -->
					<view class="list-item">
						<text>工序名称</text>
						<text>{{item.processName}}</text>
					</view>
					<view class="operateBtn">
						<u-button size="medium" type="success" @click="showImport(item,index)">重点</u-button>
						<u-button size="medium" type="warning" @click="unimportant(item)">非重点</u-button>
					</view>
			</view>
		</view>
		<u-action-sheet :list="importNameList" v-model="showImportName" @click="importNameSelect"></u-action-sheet>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>	
<script>
	import { getQeStationList,updateStationIsImport,getQePlanList } from '../../utils/index.js'
	export default {
		data() {
			return {
				form: '',					//工位ID信息
				planNo: '',					//排产编号
				onlineStyle: ["",""],		//当工位为重点工序状态时填充的样式
				importNameList: [			//重点工序名称
					{
					  text: "打防水胶"
					},
					{
					  text: "功率螺钉紧固"
					},
					{
					  text: "关键尺寸控制"
					},
					{
					  text: "试水"
					},
					{
					  text: "市场投诉问题"
					}
				],
				showImportName: false,
				importIndex: -1,
				importObj: {}
			}
		},
		methods:{
			showImport(item,index){
				this.showImportName = true
				this.importObj = item
				this.importIndex = index
			},
			importNameSelect(index){
				this.showImportName = false
				this.form[this.importIndex].proIsImportName = this.importNameList[index].text,
				this.importIndex = -1,
				this.important(this.importObj),
				uni.hideKeyboard();
			},
			// 查询该工段所有的工位
			async getIdInfo() {
				const {data} = await getQeStationList({planNo: this.planNo})
				this.form = data.data
				if(this.form.length == 0) {
					this.$refs.uTips.show({
						title: '无相关信息，请核实!',
						type: 'warning',
						duration: '2000'
					})
				} else {
					for(let i = 0;i < this.form.length;i++){				//遍历records数组改变背景颜色
						this.judgeStyle(i)
					}
				}
			},
			judgeStyle(value) {
				if(this.form[value].isImport == "0") {
					this.onlineStyle[value] = "background-color: #FFEFD5;"
				} else {
					this.onlineStyle[value] = "background-color: #90EE90;"
				}
			},
			// 指定为重点工序
			async important(item) {
				const {data} = await updateStationIsImport({stationId: item.stationId,proIsImportName: item.proIsImportName,isImport:'1'})
				if(data.code == '1'){
					this.getIdInfo()
					this.$refs.uTips.show({
						title: '设置成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: '设置失败',
						type: 'warning',
						duration: '2000'
					})
				}
				this.importObj = {}
			},
			// 指点为非重点工序
			async unimportant(item) {
				const {data} = await updateStationIsImport({stationId: item.stationId,isImport:'0'})
				if(data.code == '1'){
					this.getIdInfo()
					this.$refs.uTips.show({
						title: '设置成功',
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: '设置失败',
						type: 'warning',
						duration: '2000'
					})
				}
			}
		},
		// 路由跳转传递过来的参数并且调用getIdInfo函数查询相应的工位
		onLoad(option) {
			this.planNo = option.planNo
			this.getIdInfo()
		},
	}	
</script>

<style>
	.main-content {
		width: 100%;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 5rpx;
		padding: 5rpx 0rpx;
	}
	// 查询按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		margin: 30rpx;
		background-color: #FFEFD5;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 10rpx 10rpx;
	}
	// 上线下线按钮样式
	.operateBtn {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}
	.hintInfo {
		display: flex;
		justify-content: center;
		color: #E0E0E0;
	}
</style>
